<template>

  <!--角色数据表格-->

    <div style="margin-top: 20px;margin-left: 10px">
      <el-breadcrumb separator="/" >
        <el-breadcrumb-item :to="{ path: '/main/echarts' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item><b>系统信息管理</b></el-breadcrumb-item>
        <el-breadcrumb-item>用户信息管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  <!-- 用户信息管理标题 -->
  <div class="user-management" style="margin-top: 51px">
    <el-table :data="tableSysuser" stripe border style="width: 100%">
      <el-table-column prop="photourl" label="用户头像" width="100" align="center">
        <template #default="scope">
          <img :src="scope.row.photourl" style="margin-top:0px;width:48px;height:48px; border-radius: 50%" />
        </template>
      </el-table-column>
      <el-table-column prop="id" label="用户ID" width="70" align="center"/>
      <el-table-column prop="username" label="用户名" width="150" align="center"/>
      <el-table-column prop="createdt" label="创户日期" width="160" align="center">
        <template #header>
          <div>
            创户日期
            <el-button :icon="Sort" circle @click="searchOnSubmitOrderBy" type="text"/>
          </div>
        </template>
        <template #default="scope">
          {{ scope.row.createdt }}
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱地址"  />
      <el-table-column prop="rolename" label="权限角色" width="120" />
      <el-table-column prop="islock" label="账户状态" width="160" align="center">
        <template  #default="scope">
          <span v-if="scope.row.islock === 0" style="color: #42b983;font-size: 15px">
            <el-button type="success" style="width: 90px" round>正常</el-button>
          </span>
          <span v-if="scope.row.islock === 1" style="color: red;font-size: 15px">
            <el-button type="danger" style="width: 90px" round>冻结</el-button>
            </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <!-- 授权按钮的工具提示 -->
          <el-tooltip content="用户授权" placement="top" effect="dark" transition="el-opacity">
            <el-button
                size="default"
                type="primary"
                @click="tableGAHandler(scope.$index, scope.row)"
            >
              <el-icon><Edit /></el-icon>
              授权
            </el-button>
          </el-tooltip>
          <!-- 冻结按钮的工具提示 -->
          <el-tooltip content="冻结账户" placement="top" effect="dark" transition="el-opacity">
            <el-button
                size="default"
                type="danger"
                @click="tableFreezeHandler(scope.$index, scope.row)"
            >
              <el-icon><Delete /></el-icon>
              冻结
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!--授权按钮表单模态框-->
  <el-dialog v-model="dialogGAState" title="用户授权" width="700">
    <div>
      <el-form ref="formEditRef" :model="formGA" label-width="120px">
        <el-form-item label="用户ID">
          <el-input v-model="formGA.id" readonly></el-input>
        </el-form-item>

        <el-form-item prop="rulename" label="权限角色">
          <el-select v-model="formGA.rulename">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="审核员" value="2"></el-option>
            <el-option label="普通用户" value="3"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogGAOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogGAOnSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import axios from 'axios';
import request from "@/utils/request";
import {onMounted, reactive, ref} from "vue"
import {ArrowRight, Delete} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Edit, Search, Sort} from "@element-plus/icons";
// 从SessionStorage取出数据
let userstr = sessionStorage.getItem('username')
const token = JSON.parse(userstr).token
//访问界面初始化时获取管理员信息
onMounted(()=>{
  getAllUser()
})

const getAllUser = ()=>{
  request({
    url : '/manage/usrmanange/getalluser',
    method : 'get',
    params : searchFormModel,
    headers: {
      'token': token
    }
  }).then(res=>{
    if (200 == res.data.errorCode){
      //请求成功后将数据上传到表格
      tableSysuser.value = res.data.data
      //alert(res.data.data)
    }
  })
}

///////// 时间排序相关 //////////////////
const searchOnSubmitOrderBy = () => {

  request({
    url : '/manage/usrmanange/getalluserorder',
    method : 'get',
    headers: {
      'token': token
    }
  }).then(res=>{
    if (200 == res.data.errorCode){
      //请求成功后将数据上传到表格
      tableSysuser.value = res.data.data
    }
  })
}

///////// 表格 //////////////////
//表格数据
const tableSysuser = ref([])
//表单的引用
const searchFormRef=ref()
//表单的数据模型
const searchFormModel =reactive({
  id : '',
  username : '',
  createdt : '',
  photourl : '',
  email : '',
  rolename : '',
  islock : ''
})
// 表格的动作
//////////////  授权模态框相关  /////////////////
//1-授权--------------------------------------------------
const tableGAHandler = (rowIndex , rowData) => {
    // //测试
    // alert(rowData.id)
    // alert(token)
    //获取表格数据赋予授权表单
    formGA.id = rowData.id
    //启动模态框
    dialogGAState.value = true
}
const dialogGAState = ref(false)

//提交按钮
const dialogGAOnSubmit = () => {
  // //测试
  // alert(formGA.id)
  // alert(formGA.rulename)

  // 数据提交到服务器
  request({
    url : '/manage/usrmanange/alteruserrole',
    method : 'put',
    data : {
      "id" : formGA.id,
      "roleid" : formGA.rulename
    },
    headers : {
      'token': token,
      'content-type' : "application/json;charset=UTF-8"
    }
  }).then(req=>{

    if (200 == req.data.errorCode){
      ElMessage({
        type: 'success',
        message: '授权成功',
      })
      // 请求后刷新表格
      getAllUser()
    }
  })
  // 服务器端返回成功 ：清空表单，关闭对话框，
  dialogGAState.value = false
}


//取消按钮
const dialogGAOnReset = () => {
  // 清空表单数据
  Object.assign(formGA , formGAData)
  // 关闭对话框
  dialogGAState.value = false
}
// 授权表单引用
const formGARef = ref()
// 编辑表单初始化数据
const formGAData = {
  id : '' ,
  rulename : ''
}
// 编辑表单绑定数据模型
const formGA = reactive({...formGAData})





//2-冻结--------------------------------------------------
const tableFreezeHandler = (rowIndex , rowData) => {
  //测试
  // alert(rowData.id)
  // alert(token)
  ElMessageBox.confirm(
      '确认冻结  ' +rowData.username +" 账户",
      '谨慎操作',
      {
        confirmButtonText: '冻结',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {//点击删除按钮，进行删除
    request({
      method : 'put',
      url : '/manage/usrmanange/frozenuser',
      data : {
        "id" : rowData.id
      },
      headers: {
        'token': token,
        'content-type' : "application/json;charset=UTF-8"
      }
    }).then(res=>{
      if (200 == res.data.errorCode){
        ElMessage({
          type: 'success',
          message: '冻结成功',
        })
        // 请求后刷新表格
        getAllUser()
      }
    })
  }).catch(() => {//点击取消按钮，进行退出
    ElMessage({
      type: 'info',
      message: '冻结取消',
    })
  })
}

</script>





<style scoped>

/* 你的CSS样式 */
.user-management {
  font-family: Arial, sans-serif; /* 设置字体 */
}

.el-table {
  border: 1px solid #ccc; /* 添加表格边框 */
}

.el-table th,
.el-table td {
  padding: 10px; /* 调整单元格内边距 */
}

</style>